<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .navbar { box-shadow: 0 2px 4px rgba(0,0,0,.1); }
        .table-container { background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.1); }
        .footer { background-color: #f8f9fa; padding: 1rem 0; margin-top: 2rem; }
        .status-badge { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
        .modal-header { background-color: #f8f9fa; }
        .modal-footer { background-color: #f8f9fa; }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-people-fill"></i> 用户管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/user/list">
                            <i class="bi bi-list-ul"></i> 用户列表
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/logout">
                            <i class="bi bi-box-arrow-right"></i> 退出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2><i class="bi bi-people"></i> 用户列表</h2>
            <a href="/user/form" class="btn btn-primary">
                <i class="bi bi-plus-lg"></i> 添加用户
            </a>
        </div>

        <div class="table-container p-3">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>创建人</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <#list users as user>
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.username}</td>
                            <td>${user.email}</td>
                            <td>
                                <#if user.enabled>
                                    <span class="badge bg-success status-badge">启用</span>
                                <#else>
                                    <span class="badge bg-danger status-badge">禁用</span>
                                </#if>
                                <#if !user.accountNonLocked>
                                    <span class="badge bg-warning status-badge">锁定</span>
                                </#if>
                                <#if !user.accountNonExpired>
                                    <span class="badge bg-warning status-badge">过期</span>
                                </#if>
                                <#if !user.credentialsNonExpired>
                                    <span class="badge bg-warning status-badge">密码过期</span>
                                </#if>
                            </td>
                            <td>${user.createdBy}</td>
                            <td>${user.createdAt?string("yyyy-MM-dd HH:mm:ss")}</td>
                            <td>
                                <div class="btn-group">
                                    <a href="/user/form?id=${user.id}" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-pencil"></i> 编辑
                                    </a>
                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                            onclick="deleteUser(${user.id})">
                                        <i class="bi bi-trash"></i> 删除
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" 
                                            onclick="toggleStatus(${user.id}, 'enabled')">
                                        <i class="bi bi-power"></i> ${user.enabled?string('禁用', '启用')}
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" 
                                            onclick="toggleStatus(${user.id}, 'locked')">
                                        <i class="bi bi-lock"></i> ${user.accountNonLocked?string('锁定', '解锁')}
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </#list>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 确认对话框 -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">确认操作</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="confirmModalBody">
                    确定要执行此操作吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmButton">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container text-center">
            <p class="mb-0">© 2024 用户管理系统. All rights reserved.</p>
        </div>
    </footer>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        let confirmModal;
        let currentAction = '';

        document.addEventListener('DOMContentLoaded', function() {
            confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
            
            document.getElementById('confirmButton').addEventListener('click', function() {
                if (currentAction) {
                    window.location.href = currentAction;
                }
            });
        });

        function deleteUser(id) {
            currentAction = '/user/delete?id=' + id;
            document.getElementById('confirmModalBody').innerHTML = '确定要删除这个用户吗？';
            confirmModal.show();
        }

        function toggleStatus(id, type) {
            let action = type === 'enabled' ? '启用/禁用' : '锁定/解锁';
            currentAction = '/user/toggle-status?id=' + id + '&type=' + type;
            document.getElementById('confirmModalBody').innerHTML = '确定要' + action + '这个用户吗？';
            confirmModal.show();
        }
    </script>
</body>
</html> 